<template>
    <div class="time-entries">
        <router-link to="/time-entries/log-time" tag="button" 
            v-if="$route.path !== '/time-entries/log-time'" class="btn btn-primary">创建
        </router-link>
        <div v-if="$route.path === '/time-entries/log-time'">
            <h3>创建</h3>
        </div>

        <hr>

        <router-view></router-view>

        <div>
            <h3 v-if="!timeEntries.length">还没有任何任务</h3>

            <div class="list-group">
                <a class="list-group-item" v-for="timeEntry in timeEntries">
                    <div class="row">
                        <div class="col-sm-2 user-details">
                            <img v-bind:src="timeEntry.user.image" class="avatar img-circle img-responsive center-block" />
                            <h4 class="text-center"> {{ timeEntry.user.name }} </h4>
                        </div>

                        <div class="col-sm-2 text-center time-block">
                            <h3 class="list-group-item-text total-time">
                                <i class="glyphicon glyphicon-time"></i>{{ timeEntry.totalTime }}
                            </h3>
                            <p class="label label-primary text-center">
                                <i class="glyphicon glyphicon-calendar"></i>{{ timeEntry.date }}
                            </p>
                        </div>

                        <div class="col-sm-7 comment-section">
                            <p>{{ timeEntry.comment }}</p>
                        </div>

                        <div class="col-sm-1">
                            <button class="btn btn-xs btn-danger" @click="deleteTimeEntry(timeEntry)">X</button>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                timeEntries: [
                    {
                        user: {
                        name: 'sb',
                        email: 'kodo@forchange.cn',
                        image: require('@/assets/img/users-head.jpg')
                        },
                        comment: '我的一个备注',
                        totalTime: 1.5,
                        date: '2017-05-01'
                    },
                    {
                        user: {
                        name: 'sb2',
                        email: 'kodo@forchange.cn',
                        image: require('@/assets/img/users-head.jpg')
                        },
                        comment: '我的第二个备注',
                        totalTime: 2.5,
                        date: '2017-05-02'
                    }
                ]
            }
        },
        methods: {
            deleteTimeEntry: function(timeEntry) {
                var index = this.timeEntries.indexOf(timeEntry);
                if (window.confirm('确定要删除吗?')) {
                    this.timeEntries.splice(index, 1);
                    // this.$dispatch('deleteTime', timeEntry);
                }
            }
        },
        // events: {
        //     timeUpdate: function(timeEntry) {
        //         this.timeEntries.push(timeEntry);
        //         return true;
        //     }
        // }
    }
</script>

<style>
    .avatar {
        height: 75px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .user-details {
        background-color: #f5f5f5;
        border-right: 1px solid #ddd;
        margin: -10px 0;
    }
    .time-block {
        padding: 10px;
    }
    .comment-section {
        padding: 20px;
    }
</style>